<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .noe{
            width: 400px;
            height: 400px;
            margin: 100px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            /* Y轴旋转48deg */
            /* transform: rotateY(48deg) rotateX(325deg); */
            /* 透明属性,给父元素加,值在800-1200之间 */
            perspective: 800px;
            /* 立体3d */
            transform-style: preserve-3d;
            /* 实现动画   infinite循环   alternate来回 */
            animation: jin 1s infinite alternate;
        }

        .noe .two{
            /* 立体3d */
            /* transform-style: preserve-3d; */
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
            /* 固定定位 */
            position: fixed;
            text-align: center;
            line-height: 100px;
            
        }
        .noe .two:nth-child(1){
            /* z轴平移-100px */
            transform: translateZ(50px);
            background-color: aqua;
        }
        .noe .two:nth-child(2){
            transform: translateX(-50px)  rotateY(-90deg);
            background-color: blue;
        }
        .noe .two:nth-child(3){
            transform:translateX(50px) rotateY(-90deg);
            background-color: rgb(13, 87, 100);
        }
        .noe .two:nth-child(4){
            transform: rotateX(90deg) translateZ(50px);
            background-color: brown;
        }
        .noe .two:nth-child(5){
            transform: rotateX(90deg) translateZ(-50px);
            background-color: chocolate;
        }
        .noe .two:nth-child(6){
            transform: translateZ(-50px);
        }
/* 制定动画 */
@keyframes jin {
    form{
        transform: rotateX(60deg) rotateY(90deg);
    }
    to{
        transform: rotateX(90deg) rotateY(180deg);
    }
    
}
    </style>
</head>
<body>
    <div class="noe">
        <div class="two">1</div>
        <div class="two">2</div>
        <div class="two">3</div>
        <div class="two">4</div>
        <div class="two">5</div>
        <div class="two">6</div>
    </div>
</body>
</html>